<template>
  <div class="page">
    <!-- 页面其他内容 -->

    <!-- 固定在右下角的按钮容器 -->
    <div class="fixed-buttons">
      <!-- 电话按钮 
        @click="showPhonePopup" -->
      <button
        class="fixed-btn"
        @mouseenter="handleMouseEnter()"
        @mouseleave="handleMouseLeave()"
      >
        <dl>
          <dt class="iconfont icon-dianhua"></dt>
          <dd>电话</dd>
        </dl>
        <div v-if="phonePopupVisible" class="popupAA">13673666590</div>
      </button>
      <!-- 微信按钮 @click="showWeChatPopup" -->
      <button
        class="fixed-btn"
        @mouseenter="handleMouseEntera()"
        @mouseleave="handleMouseLeavea()"
      >
        <dl>
          <dt class="iconfont icon-ico"></dt>
          <dd>客服微信</dd>
        </dl>
        <div v-if="wechatPopupVisible" class="popupBB">
          <img
            src="https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/code.jpg"
            alt=""
          />
        </div>
      </button>
      <!-- 常见问题按钮 -->
      <button class="fixed-btn" @click="showFAQ">
        <dl>
          <dt class="iconfont icon-wenti"></dt>
          <dd>常见问题</dd>
        </dl>
      </button>
      <!-- 反馈按钮 -->
      <button class="fixed-btn" @click="showFeedback">
        <dl>
          <dt class="iconfont icon-fankuiyijian"></dt>
          <dd>反馈</dd>
        </dl>
      </button>
      <!-- 返回顶部按钮 -->
      <button class="fixed-btn" @click="scrollToTop">
        <dl>
          <dt class="iconfont icon-shang"></dt>
          <dd>返回顶部</dd>
        </dl>
      </button>
    </div>
    <!-- 常见问题弹框 -->
    <div v-if="faqPopupVisible" class="popup">
      <div class="popup-content">
        <h3>常见问题</h3>
        <p>问题解答内容...</p>
        <button @click="closePopup('faq')">关闭</button>
      </div>
    </div>

    <!-- 反馈弹框 -->
    <div v-if="feedbackPopupVisible" class="popup">
      <div class="popup-content">
        <h3>反馈</h3>
        <textarea placeholder="请输入您的反馈"></textarea>
        <button @click="closePopup('feedback')">关闭</button>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";

// 弹框的可见状态
const phonePopupVisible = ref(false);
const wechatPopupVisible = ref(false);
const faqPopupVisible = ref(false);
const feedbackPopupVisible = ref(false);

const handleMouseEnter = () => {
  phonePopupVisible.value = true;
};

const handleMouseLeave = () => {
  phonePopupVisible.value = false;
};

const handleMouseEntera = () => {
  wechatPopupVisible.value = true;
};

const handleMouseLeavea = () => {
  wechatPopupVisible.value = false;
};

// 显示弹框函数
//   const showPhonePopup = () => phonePopupVisible.value = true;
const showWeChatPopup = () => (wechatPopupVisible.value = true);
const showFAQ = () => (faqPopupVisible.value = true);
const showFeedback = () => (feedbackPopupVisible.value = true);

// 关闭弹框函数
const closePopup = (popup) => {
  if (popup === "phone") phonePopupVisible.value = false;
  if (popup === "wechat") wechatPopupVisible.value = false;
  if (popup === "faq") faqPopupVisible.value = false;
  if (popup === "feedback") feedbackPopupVisible.value = false;
};

// 返回顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
</script>
  
  <style scoped>
.page {
  /* min-height: 100vh; */
  padding-bottom: 80px; /* 留出空间以避免按钮遮挡 */
}

/* 固定在右下角的按钮容器 */
.fixed-buttons {
  position: fixed;
  bottom: 50px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

/* 每个按钮的样式 */
.fixed-btn {
  padding: 10px;
  background-color: #fff;
  color: #666;
  border: none;
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s;
}

.fixed-btn:hover {
  background-color: #d3d0d0;
}

/* 弹框样式 */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  padding: 10px;
}

.popup-content h3 {
  margin-bottom: 15px;
}

.popup-content textarea {
  width: 250px !important;
}

.popup-content button {
  background-color: #007bff;
  color: white;
  border: none;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

.popupAA {
  position: absolute;
  color: #fff;
  top: 13px;
  left: -100px;
  width: 100px;
  text-align: center;
  line-height: 30px;
  background: #000000a4;
  border-radius: 5px;
}

.popupBB {
  position: absolute;
  color: #fff;
  top: 50px;
  left: -100px;
  width: 100px;
  text-align: center;
  background: #000000a4;
  border-radius: 5px;
}

.popupBB > img {
  width: 70px;
  margin: 5px;
}

.popup-content button:hover {
  background-color: #0056b3;
}

.popup-content textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

dl dt dd{
  margin-top: 10px;
}
</style>